<template>
    <div>
        <h1>康复理疗列表</h1>
        项目名称:
        <input type="text" v-model="data.name">&nbsp;&nbsp;
        <button class="btn btn-primary" @click="getlist">查询</button>&nbsp;&nbsp;
        <button class="btn btn-info" @click="Alls(1)">批量启用</button>&nbsp;&nbsp;
        <button class="btn btn-danger" @click="Alls(0)">批量禁用</button>&nbsp;&nbsp;
        <button class="btn btn-primary" @click="dao">导出</button>&nbsp;&nbsp;
        <table border="1px" class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="c" @click="checkall"></td>
                    <td>项目编号</td>
                    <td>项目名称</td>
                    <td>佣金(元)</td>
                    <td>服务人数</td>
                    <td>服务时长</td>
                    <td>项目说明</td>
                    <td>状态</td>
                    <td>逻辑删除</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in info.list">
                    <td><input type="checkbox" :value="a.Id" v-model="cc" @change="checknot"></td>
                    <td>{{ a.Number }}</td>
                    <td>{{ a.KFName }}</td>
                    <td>{{ a.Price }}</td>
                    <td>{{ a.People }}</td>
                    <td>{{ a.Ftime }}</td>
                    <td>{{ a.Aera }}</td>
                    <td>{{ a.State == 1 ? "启用" : "禁用" }}</td>
                    <td>{{ moment(a.CreateTime).format('YYYY-MM-DD') }}</td>
                    <td>
                        <button class="btn btn-danger" @click="del(a.Id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span> 共 {{ info.Hnum }} 数 ， 每 页 {{ data.size }} 条 ， 共 {{ data.index }} / {{ info.Ynum }} 页
            </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-success" @click="go(1)">首页</button>&nbsp;&nbsp;
            <button class="btn btn-success" @click="go(data.index - 1)">上一页</button>&nbsp;&nbsp;
            <span v-for="a in info.Ynum" @click="go(a)">&nbsp;{{ a }}&nbsp;</span>&nbsp;&nbsp;
            <button class="btn btn-success" @click="go(data.index + 1)">下一页</button>&nbsp;&nbsp;
            <button class="btn btn-success" @click="go(info.Ynum)">尾页</button>&nbsp;&nbsp;
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
import moment from 'moment';
const router = useRouter();

onMounted(() => {
    show();
})

let c: any = ref(false)
let cc: any = ref([])

let info: any = ref([])

let data: any = reactive({
    name: '',
    index: 1,
    size: 2
})

const getlist = () => {
    data.index = 1;
    show();
}

//显示
const show = () => {
    axios({
        url: 'https://localhost:7118/api/KFliliao/ShowKF',
        method: 'get',
        params: data
    })
        .then((res) => {
            console.log(res.data);
            info.value = res.data
        })
}

//翻页
const go = (num: any) => {
    if (num < 1) {
        data.index = 1;
        show();
        return;
    }
    if (num > info.value.Ynum) {
        data.index = info.value.Ynum;
        show();
        return;
    }
    data.index = num;
    show();
}

//逻辑删除
const del = (id: any) => {
    if (confirm('确认删除吗?'))
        axios({
            url: 'https://localhost:7118/api/KFliliao/Del',
            method: 'delete',
            params: {
                id: id
            }
        })
            .then((res) => {
                if (res.data > 0) {
                    alert('删除成功!');
                    getlist();
                }
                else {
                    alert('删除失败!');
                }
            })
}

//全选
const checkall = () => {
    console.log(c.value);
    c.value = !c.value;
    if (c.value == true) {
        cc.value = info.value.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        cc.value = [];
    }
}

//反选
const checknot = () => {
    if (cc.value.length == info.value.list.length) {
        c.value = true;
    }
    else {
        c.value = false;
    }
}

//批量修改状态
const Alls = (state: any) => {
    if (cc.value.length == 0) {
        alert('必须选一项!');
        return;
    }
    axios({
        url: 'https://localhost:7118/api/KFliliao/UpdateAll',
        method: 'put',
        params: {
            ids: cc.value.toString(),
            state: state
        }
    })
        .then((res) => {
            if (res.data > 0) {
                alert('修改状态成功!');
                c.value = false;
                cc.value = [];
                getlist();
            }
            else {
                alert('修改状态失败!');
                c.value = false;
                cc.value = [];
            }
        })
}

//导出
const dao = () => {
    location.href=`https://localhost:7118/api/KFliliao/Daochu?name=${data.name}&index=${data.index}&size=${data.size}`;
}
</script>

<style scoped></style>